PleaseWait.js: A Loading/Splash Screen for your SPA

PleaseWait.js: A Loading/Splash Screen for your SPA

Original Article · Articles in this issue

Step 1: Install

bower install please-wait

Step 2: Include in your HTML

Include the please-wait.css file in your <head> tag/in your normal workflow.

You can include the please-wait.js file at the end of your body, but above your other <script> tag(s) if you like. This allows you to use PleaseWait immediately and show a loading page while the browser downloads the rest of your Javascript. Of course, this is optional. Feel free to roll the PleaseWait library into your normal, minified JS file if you prefer.

Step 3: Hide initial HTML flash

Optional: If your initial template has some styled HTML by default (like a toolbar), you'll probably want to hide that, or your users could see a quick flash of your normal template, followed by the loading screen. This is easy to do by wrapping the HTML in your body in a div, and hiding/showing that when things are ready. PleaseWait adds a class of 'pg-loaded' to your <body> when it's done.

Step 4: Show the loading screen

As soon as possible in your app, call pleaseWait to trigger the loading screen. Right now, the API is quite simple. Valid options are:

  • backgroundColor - Needs to be a valid CSS color.
  • logo - The URL to a logo to display. The src attribute of an img tag will be set to this value.
  • loadingHtml - HTML to display below the logo. Can be a message, spinner, or any HTML you want. See SpinKit for some great HTML/CSS3 spinners.
pleaseWait returns the loading screen when called. You'll want to save this in order to close the loading screen later.

Step 5: Close the loading screen

Whenever you're app is ready for the user, call finish() on the returned object from the pleaseWait call. This will fade the screen out.

Bonus Section! Update the HTML

If you want to update the loadingHtml displayed, call updateLoadingHtml(html) on the returned object from pleaseWait. This, by default, will fade the current HTML out and the given HTML in. This is useful if you want to cycle through messages (in case your app takes a good bit of time to load), show a login form within the loading screen, etc.

Articles in This Issue